<template>
    <div>
        <transition name="fade-down">
            <div class="home-header">
                <div class="header-left" @click="goToHome">
                    <img alt="logo" src="../assets/logo.png" class="header-logo">
                    <span class="header-title">双手简谱编辑器</span>
                </div>
                <div class="header-right">
                    <template v-if="!isLogin">
                        <el-button type="text" class="auth-link-btn" @click="showRegister = true">注册</el-button>
                        <span class="auth-divider">|</span>
                        <el-button type="text" class="auth-link-btn" @click="showLogin = true">登录</el-button>
                        <el-button type="text" class="changelog-btn" @click="showChangelog">更新日志</el-button>
                    </template>
                    <template v-else>
                        <el-dropdown trigger="click">
                            <div class="user-info">
                                <span class="welcome-text">欢迎，</span>
                                <span class="username">{{ user.username }}</span>
                                <span class="user-avatar">
                                    <img :src="userAvatar" alt="avatar" class="avatar-img" />
                                </span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="goToVip">会员充值</el-dropdown-item>
                                <el-dropdown-item @click.native="goToStudyNotes">学习笔记</el-dropdown-item>
                                <el-dropdown-item @click.native="goToChordDict">和弦字典</el-dropdown-item>
                                <el-dropdown-item @click.native="goToPlanning">规划计划</el-dropdown-item>
                                <el-dropdown-item @click.native="goToUpload">谱子上传</el-dropdown-item>
                                <el-dropdown-item @click.native="goToProjectManagement">项目管理</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button type="text" class="changelog-btn" @click="showChangelog">更新日志</el-button>
                    </template>
                </div>
            </div>
        </transition>

        <!-- 更新日志对话框 -->
        <el-dialog title="更新日志" :visible.sync="changelogVisible" width="600px" class="changelog-dialog">
            <div class="changelog-content">
                <h3>v1.0.0 (2024-03-20)</h3>
                <ul>
                    <li>🎉 首次发布</li>
                    <li>🎼 支持双声部编辑，左右手分开录入与编辑</li>
                    <li>🎧 新增实时试听功能，随时听见你的创作</li>
                    <li>📝 支持歌词编辑与同步显示</li>
                    <li>🗓️ 计划管理，支持添加提醒并防止选择过去时间</li>
                    <li>🧠 智能排版，自动调整布局，支持多种谱表类型</li>
                    <li>📒 学习笔记功能，支持标签管理与内容搜索</li>
                    <li>📤 支持导出简谱文件</li>
                    <li>🗂️ 曲谱管理，支持多首曲谱的创建、保存与切换</li>
                    <li>🖌️ 优化界面设计，提升用户体验</li>
                    <li>🔔 新增全局提醒，重要事项不错过</li>
                    <li>🔍 支持曲谱与笔记的快速检索</li>
                    <li>🛠️ 修复若干已知问题，提升系统稳定性</li>
                </ul>
            </div>
        </el-dialog>

        <!-- 登录/注册弹窗 -->
        <login-dialog :visible.sync="showLogin" @login-success="onLoginSuccess" />
        <register-dialog :visible.sync="showRegister" @register-success="onRegisterSuccess" />
    </div>
</template>

<script>
import LoginDialog from './LoginDialog.vue'
import RegisterDialog from './RegisterDialog.vue'

export default {
    name: 'HomeHeader',
    components: {
        LoginDialog,
        RegisterDialog
    },
    data() {
        return {
            changelogVisible: false,
            showLogin: false,
            showRegister: false,
            isLogin: localStorage.getItem('isLogin') === '1',
            user: JSON.parse(localStorage.getItem('user')) || {}
        }
    },
    computed: {
        userAvatar() {
            return 'https://api.dicebear.com/7.x/identicon/svg?seed=' + (this.user.username || 'user')
        }
    },
    methods: {
        goToHome() {
            if (this.$route.path !== '/') {
                this.$router.push('/')
            }
        },
        goToPlanning() {
            if (this.$route.path !== '/planning') {
                this.$router.push('/planning')
            }
        },
        goToUpload() {
            if (this.$route.path !== '/upload') {
                this.$router.push('/upload')
            }
        },
        goToProjectManagement() {
            if (this.$route.path !== '/project-management') {
                this.$router.push('/project-management')
            }
        },
        goToVip() {
            if (this.$route.path !== '/vip') {
                this.$router.push('/vip')
            }
        },
        goToChordDict() {
            if (this.$route.path !== '/chord-dictionary') {
                this.$router.push('/chord-dictionary')
            }
        },
        goToStudyNotes() {
            if (this.$route.path !== '/study-notes') {
                this.$router.push('/study-notes')
            }
        },
        onLoginSuccess(user) {
            this.isLogin = true
            this.user = user
            this.$message.success('登录成功')
        },
        onRegisterSuccess(user) {
            this.showLogin = true
            this.$message.success('注册成功，请登录')
        },
        logout() {
            localStorage.removeItem('isLogin')
            this.isLogin = false
            this.user = {}
            this.$message.success('已退出登录')
            if (this.$route.path !== '/') {
                this.$router.push('/')
            }
        },
        showChangelog() {
            this.changelogVisible = true
        }
    }
}
</script>

<style scoped>
.home-header {
    height: 64px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.header-left:hover {
    opacity: 0.8;
}

.header-logo {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.header-logo:hover {
    transform: rotate(360deg);
}

.header-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.auth-link-btn {
    padding: 0 8px;
    font-size: 14px;
    color: #409eff;
    background: none;
    border: none;
    box-shadow: none;
    vertical-align: middle;
}

.auth-link-btn:hover {
    color: #66b1ff;
    background: none;
}

.auth-divider {
    color: #bbb;
    margin: 0 2px;
    font-size: 14px;
    user-select: none;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.user-info:hover {
    background-color: #f5f7fa;
}

.welcome-text {
    font-size: 14px;
    color: #909399;
}

.username {
    font-size: 14px;
    color: #606266;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-avatar {
    display: inline-block;
    vertical-align: middle;
}

.avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #e3eaf2;
    background: #f8fafc;
}

.changelog-dialog {
    border-radius: 12px;
}

.changelog-content {
    padding: 20px;
}

.changelog-content h3 {
    color: #222;
    margin-bottom: 16px;
}

.changelog-content ul {
    list-style: none;
    padding: 0;
}

.changelog-content li {
    margin-bottom: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 动画相关样式 */
.fade-down-enter-active,
.fade-down-leave-active {
    transition: all 0.5s ease;
}

.fade-down-enter,
.fade-down-leave-to {
    opacity: 0;
    transform: translateY(-20px);
}

@media (max-width: 768px) {
    .home-header {
        padding: 0 20px;
    }

    .header-title {
        display: none;
    }
}

.changelog-btn {
    margin-left: 16px;
}
</style>